<!doctype html>
<html class="no-js" lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1">
  <link rel="icon" type="image/png" href="/favicon.ico">
  <title>科学养生网</title>
  <link rel="stylesheet" href="css/swiper.min.css">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/app.css">
  <link rel="stylesheet" href="css/app_web.css">

  <script type="text/javascript" src="js/jquery1.12.4.min.js"></script>
  <script type="text/javascript" src="js/jquery.SuperSlide.2.1.3.js"></script>
  <script type="text/javascript" src="js/swiper.min.js"></script>
  <script type="text/javascript" src="js/bootstrap.min.js"></script>
  <script src="js/vue.js"></script>
  <script src="js/element.js"></script>
  <script src="js/axios.js"></script>
  <script src="js/axios/index.js"></script>
  <link rel="stylesheet" href="css/element.css">
</head>

<body>
<!--头部  -->
<div class="header-wrap">
  <common-header></common-header>
</div>

<div style="height: 300px;background-image: linear-gradient(#fbefe1, #ffffff);"></div>
<div id="app" style="margin-top: -300px">
  <el-form :model="user" :rules="rules" ref="ruleForm" label-width="40%" style="margin-top:50px"
           class="demo-ruleForm" status-icon>
    <el-form-item label="用户名" prop="username" required>
      <el-input v-model="user.username" style="width:400px;"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password" required>
      <el-input type="password" v-model="user.password" style="width:400px;">
      </el-input>
    </el-form-item>
    <el-form-item label="确认密码" prop="rPassword" required>
      <el-input type="password" v-model="user.rPassword" style="width:400px;">
      </el-input>
    </el-form-item>
    <el-form-item label="生日" required>
      <el-col :span="11">
        <el-form-item prop="birthday">
          <el-date-picker type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="选择日期"
                          v-model="user.birthday" style="width:400px;"></el-date-picker>
        </el-form-item>
      </el-col>
    </el-form-item>
    <el-form-item label="邮箱" prop="email" required>
      <el-input v-model="user.email" style="width:400px;"></el-input>
    </el-form-item>
    <el-form-item label="住址" prop="address" required>
      <el-input v-model="user.address" style="width:400px;"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')" style="background-color: rgb(230, 2, 2);border-color: #FFFFFF;">立即注册</el-button>
    </el-form-item>
  </el-form>
</div>

<!-- footer -->
<div class="footer-wrap">
  <common-footer></common-footer>
</div>
<script src="common/index.js"></script>
<script>
    new Vue({el: '.header-wrap'})
    new Vue({el: '.footer-wrap'})

    new Vue( {
        el: '#app',
        data() {
            const validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.user.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            }
            return {
                user: {
                    username: '',
                    password: '',
                    rPassword: '',
                    birthday: '',
                    email: '',
                    address: '',
                },
                rules: {
                    username: [
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                        {min: 2, max: 18, message: '长度在 2 到 18 个字符', trigger: 'blur'}
                    ],
                    password: [
                        {type: 'string', required: true, message: '请输入密码', trigger: 'blur'},
                        {min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur'}
                    ],
                    email: [
                        {type: 'email', required: true, message: '请输入邮箱', trigger: 'blur'}
                    ],
                    birthday: [
                        {type: 'string', required: true, message: '请选择时间', trigger: 'change'}
                    ],
                    address: [
                        {type: 'string', required: true, message: '请输入地址', trigger: 'blur'}
                    ],
                    rPassword: [
                        {type: 'string', required: true, message: '请再次输入密码', trigger: 'blur'},
                        {min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur'},
                        {validator: validatePass2, trigger: 'blur'}
                    ]
                }
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate(async (valid) => {
                    if (valid) {
                        try {
                            await _axios.post('/users', this.user);
                            this.$message.success('注册成功');
                            window.location.href = "./login.html"

                        } catch (error) {
                            this.$message.error(error?.response?.data?.message);
                        }
                    } else {
                        console.log('error submit!!');
                        this.$message.error('请完成注册表格');
                        return false;
                    }
                });
            },
        }
    })
</script>
<script src="./common/login.js"></script>
</body>
</html>
